<template>
  <div>
    <!-- 需求: 页面加载时自动获取焦点 -->
    <input v-focus type="text" placeholder="请输入内容">
    <!-- 需求: 给指令传入一个颜色, 让标签设置文字颜色 -->
    <div v-color="color">
      今天天气真好! 温度高达 17 度! 适合学习!
    </div>
    <!-- 需求升级: 点击按钮修改颜色 -->
    <button @click="color = 'yellow'">修改颜色</button>
  </div>
</template>

<script>
// 自定义指令的好处:
// 1. 避免我们频繁操作 DOM
// 2. 便于复用
// 传统做法, 会操作 DOM
// window.onload = function() {
//   // 获取 input
//   // 获取焦点
// }
export default {
  // 局部指令使用很少
  directives: {
    // 这里的指令只能在当前组件中使用
    // 指令名: 配置对象
    focus: {
      inserted(el) {
        el.focus()
      }
    },
    color: {
      // 面试题: 自定义指令你用过哪些钩子?
      // 这些自动执行的函数, 还有一个爱称: 钩子函数
      // 这个函数会在元素挂载到页面时自动执行
      // inserted 有两个参数:
      // 参数1: 原生 DOM 对象
      // 参数2: 指令相关的所有参数
      inserted(el, binding) {
        // console.log('绑定的元素加载了:', el, binding.value)
        el.style.color = binding.value
      },
      // 这个函数会在指令的值发生变化时自动执行
      // 同样也会提供两个参数, 和 inserted 一模一样
      update(el, { value }) {  // 对象的解构, 参数也能解
        // console.log('我变了')
        el.style.color = value
      }
    }
  },
  data() {
    return {
      color: 'yellowgreen'
    };
  }
}
</script>

<style lang="scss" scoped>

</style>


